<template>
	<view>
		<view class="tarbar">
			<view v-for='(item,index) in datas' @tap="tabClick(index,item.urls,item.id)" class="tarbar-list">
				<image src="../../static/img/tabBar/fabu.png" class="tarbar-img" v-show="item.imgShow" @click="show = true;"></image>
				<view v-text="item.name" :class="activeMenu===item.id ? 'tarbar-text active':'tarbar-text' "></view>
			</view>	
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="0" class="fabu-drawer">
			<view class="fabu-content u-flex">
				<view class="fabu-item  u-flex-1">
					<image src="../../static/img/dongtai.png" class="fabu-icon"></image>
					<text class="fabu-text">发动态</text>
				</view>
				<view class="fabu-item u-flex-1">
					<image src="../../static/img/faship.png" class="fabu-icon"></image>
					<text class="fabu-text">发视频</text>
				</view>
				<view class="fabu-item u-flex-1">
					<image src="../../static/img/fahuodong.png" class="fabu-icon"></image>
					<text class="fabu-text">发活动</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
			props:["totarBer"],//从父组件传来的值 来控制点击当前的颜色
			data() {
				return {
					show: false,
					imgShow:false,
					activeMenu:false,
					datas: [{
							urls: '/pages/index/index',
							name: '首页',
							id: 1,
						},
						{
							urls: '/pages/chat/chat',
							name: '聊天',
							id: 2,
						},
						{
							urls: '/pages/tcpj/orderSucceed',
							imgShow:true,
							id: 3,
						},
						{
							urls: '/pages/activity/activity',
							name: '活动',
							id: 4,
						},
						{
							urls: 'pages/user/user',
							name: '我的',
							id: 5,
						}
					],
				}
			},
			created() {
			//用来控制是显示当前页面的tarBar图标变亮
				if(this.totarBer.id==2){
					this.$set(this.datas[2],'color',this.totarBer.color)
				}
				if(this.totarBer.id==1){
					this.$set(this.datas[1],'color',this.totarBer.color)
				}
				
				
			},
			methods: {
				tabClick(i,urls, id) {
					this.activeMenu = id
					if(id==1){
						uni.switchTab({
							url: urls
						});
					}else{
						uni.navigateTo({
							url: urls
						});
					}
				},
				release(){
					
				}
			}
		}
</script>

<style lang="scss">
.tarbar {
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: space-around;
		background-color: #000;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 30rpx;
		color: #999999;
		padding: 10rpx 0;
		box-sizing: border-box;
	}
.tarbar-list{
	line-height: 76rpx;
}
.tarbar-text{
	font-size: 30rpx;
	font-weight: 700;
	color: #b2b2b2;
}
.tarbar-img{
	width: 40px;
	height: 40px;
}
.active{
	color: #FFFFFF;
}
.fabu-content{
	padding: 50rpx 30rpx;
}
.fabu-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.fabu-icon{
		width: 64rpx;
		height: 64rpx;
	}
	.fabu-text{
		font-size: 24rpx;
		color: #515151;
		margin-top: 10rpx;
	}
}
</style>
